<script setup>
import { computed, onMounted, ref } from 'vue'
import { apiProjectData } from '@/api'
import { updateCountdown, getImgName } from '../../common/js/public.js'

const typeListName = ['月度', '季度', '年度']
const typeList = ['month', 'quarter', 'year']
const currTypeIndex = ref(0)

const getRankDate = (data) => {
  if (data.length >= 2) {
    const secondElement = data.splice(1, 1)[0]
    data.unshift(secondElement)
  }
  return data
}

const OutputDataVis = ref([]) // 右边
const ProfitDataVis = ref([]) // 左边
const getProjectData = async (type) => {
  const { OutputData = [], ProfitData = [] } = await apiProjectData({
    mode: type || null
  })
  OutputDataVis.value = getRankDate(OutputData)
  ProfitDataVis.value = getRankDate(ProfitData)
}

// 头部倒计时
const timeList = ref([])

onMounted(() => {
  getProjectData(typeList[currTypeIndex.value])
  setInterval(() => {
    currTypeIndex.value += 1
    if (currTypeIndex.value === 3) currTypeIndex.value = 0
    getProjectData(typeList[currTypeIndex.value])
  }, 60 * 1000)

  setInterval(() => {
    timeList.value = updateCountdown()
  }, 1000)
})

const leftTopData = computed(() => {
  return ProfitDataVis.value.slice(0, 3)
})
const leftBottomData = computed(() => {
  return ProfitDataVis.value.slice(3)
})
const rightTopData = computed(() => {
  return OutputDataVis.value.slice(0, 3)
})
const rightBottomData = computed(() => {
  return OutputDataVis.value.slice(3)
})

const setDefaultImage = (e) => {
  e.target.remove()
}

</script>

<template>
  <div class="data-board">
    <div class="bottom">
      <div class="bottom-l rank" style="margin-right: 152px">
        <div class="rank-top" style="color: rgba(50, 48, 138, 1)">
          交付数据（利润总榜）
        </div>
        <div class="rank-bottom">
          <div class="rank-third">
            <div class="rank-list" :class="['rank'+index]" v-for="(item, index) in leftTopData" :key="index">
              <div class="logo"></div>
              <div class="name">{{ item.Manager }}</div>
              <div class="text">利润</div>
              <div class="num">{{ item.TotalProfit }}</div>
              <div class="name-log">
                <img :src="`http://admin.umayle.com/upload/userphoto/${item.Manager}.jpg`" alt=""
                  @error="setDefaultImage($event)">
              </div>
            </div>
          </div>
          <div class="rank-other">
            <div class="t-head t-table">
              <div>排名</div>
              <div>姓名</div>
              <div>管理项目（元）</div>
              <div>利润（元）</div>
            </div>
            <vue3-seamless-scroll class="seamless-warp scroll" hover-stop="true" :list="leftBottomData" hover="true"
              step="0.5">
              <div class="t-body t-table" v-for="(item, index) in leftBottomData" :key="index">
                <div class="rank">TOP{{ index+4 }}</div>
                <div>{{ item.Manager || '-' }}</div>
                <div class="row-3">{{ item.TotalProjectAmount }}</div>
                <div class="row-4">{{ item.TotalProfit }}</div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="bottom-m">
        <p class="remainingDays">2024剩余天数</p>
        <div id="countdownDisplay">
          <div>{{ timeList[0] }}
            <span>DAYS</span>
          </div>
          <span><i></i><i></i></span>
          <div>{{ timeList[1] }}
            <span>HRS</span>
          </div>
          <span><i></i><i></i></span>
          <div>{{ timeList[2] }}
            <span>MINS</span>
          </div>
          <span><i></i><i></i></span>
          <div>{{ timeList[3] }}
            <span>SECS</span>
          </div>
        </div>
      </div>
      <div class="bottom-r rank">
        <div class="rank-top" style="color: rgba(18, 30, 54, 1)">
          研发数据（<span style="color:#517BFF">{{typeListName[currTypeIndex]}}</span>产值榜）
        </div>
        <div class="rank-bottom">
          <div class="rank-third">
            <div class="rank-list" :class="['rank'+index]" v-for="(item, index) in rightTopData" :key="index">
              <div class="logo"></div>
              <div class="name">{{ item.UserName }}</div>
              <div class="text">产值</div>
              <div class="num">{{ item.ProductionValue }}</div>
              <div class="name-log">
                <img :src="`http://admin.umayle.com/upload/userphoto/${item.UserName}.jpg`" alt=""
                  @error="setDefaultImage($event)">
              </div>
            </div>
          </div>
          <div class="rank-other">
            <div class="t-head t-table">
              <div>排名</div>
              <div>姓名</div>
              <div>参加项目（个）</div>
              <div>完成任务</div>
              <div>产值（元）</div>
            </div>
            <vue3-seamless-scroll class="seamless-warp scroll" hover-stop="true" :list="rightBottomData" hover="true"
              step="0.5">
              <div class="t-body t-table" v-for="(item, index) in rightBottomData" :key="index">
                <div class="rank">TOP{{ index+4 }}</div>
                <div>{{ item.UserName }}</div>
                <div class="row-3">{{ item.ProjectCount }}</div>
                <div class="row-5">{{ item.TotalFinishCount }}</div>
                <div class="row-4">{{ item.ProductionValue }}</div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped  lang="scss">
.data-board {
  background: #ecf0fc;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 1920px;
  overflow: hidden;
  .top-nav {
    padding: 14px 44px;
    width: 100%;
    height: 110px;
    background: linear-gradient(
      180deg,
      rgba(192, 206, 251, 0.62) 0%,
      rgba(192, 206, 251, 0) 100%
    );

    span {
      display: inline-block;
      font-family: 'DroidSerif';
      font-weight: 400;
      font-size: 40px;
      color: #282828;
      line-height: 48px;
      letter-spacing: 10px;
      &.active {
        font-size: 60px;
        color: #517bff;
        line-height: 72px;
        letter-spacing: 15px;
        &::after {
          content: '';
          display: block;
          height: 5px;
          width: 140px;
          background: #517bff;
          position: relative;
          top: 8px;
        }
      }
    }
    b {
      display: inline-block;
      margin: 0 20px;
      font-size: 40px;
      line-height: 72px;
    }
  }
  .bottom {
    flex: 1;
    padding: 0 36px;
    display: flex;
    justify-content: space-around;
    .rank {
      flex: 1;
      .rank-top {
        background: url('../../assets/board/l_title.png') no-repeat;
        background-size: contain;
        margin: 0 auto;
        font-family: DroidSerif;
        width: 355px;
        font-weight: 400;
        font-size: 26px;
        color: #ffffff;
        height: 45px;
        line-height: 40px;
        text-align: left;
        padding-left: 20px;
        margin-top: 90px;
        margin-bottom: 50px;
      }
      .rank-bottom {
        .rank-third {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          padding: 0 80px;
          .rank-list {
            // width: 30%;
            width: 207px;
            height: 264px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            background-size: cover !important;
            position: relative;
            bottom: 27px;

            .name-log {
              position: absolute;
              top: 47px;
              left: 76px;
              img {
                width: 70px;
                height: 70px;
                border-radius: 50%;
              }
            }

            .logo {
              width: 134px;
              height: 150px;
              background: url('../../assets/board/s_logo.png') no-repeat;
              background-size: cover;
            }

            .name {
              font-weight: 400;
              font-size: 36px;
              color: #121e36;
              line-height: 26px;
              letter-spacing: 5px;
              text-align: center;
              margin-bottom: 15px;
              font-family: DroidSerif;
            }
            .text {
              font-family: Source Han Sans, Source Han Sans;
              font-weight: 400;
              font-size: 10px;
              color: #8a8a8a;
              line-height: 14px;
            }
            .num {
              margin-top: 10px;
              font-weight: 400;
              font-size: 26px;
              color: #507bff;
              font-family: DroidSerif;
              line-height: 31px;
              text-align: center;
              font-style: normal;
            }
          }
          .rank1 {
            width: 279px;
            height: 356px;
            background: url('../../assets/board/first.png') no-repeat;
            bottom: 0;
            .logo {
              width: 192px;
              height: 204px;
              background: url('../../assets/board/f_logo.png') no-repeat !important;
              background-size: cover !important;
            }
            .name {
              font-size: 36px;
            }
            .num {
              font-size: 40px;
              color: #f4c506;
            }
          }
          .rank0 {
            height: 264px;
            background: url('../../assets/board/second.png') no-repeat;
          }
          .rank2 {
            height: 264px;
            background: url('../../assets/board/third.png') no-repeat;
            .logo {
              background: url('../../assets/board/t_logo.png') no-repeat !important;
              background-size: cover !important;
            }
            .num {
              color: #e49a00;
            }
          }
        }

        .rank-other {
          margin-top: 30px;
          width: 100%;
          height: 350px;
          .t-table {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            padding: 0 20px;
            div:nth-child(2) {
              margin-left: -70px;
            }
            div:nth-child(3) {
              margin-left: -50px;
            }
            & > div {
              flex: 1;
              &:nth-child(1) {
                padding-left: 15px;
              }
            }
          }
          .t-head {
            font-size: 22px;
            color: #8a8a8a;
            margin-bottom: 30px;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
          }
          .t-body {
            width: 100%;
            height: 40px;
            // background: url('../../assets/board/table-bg.png') no-repeat;
            // background-size: cover;
            background: #edf2f8;
            box-shadow: 0 0 12px 0 rgba(187, 202, 255, 0.38);
            border-radius: 10px 10px 10px 10px;
            margin: 14px 0;
            text-align: left;
            & > div {
              flex: 1;
              font-family: 'Source Han Sans', 'Source Han Sans';
              font-size: 18px;
              color: #282828;
              line-height: 48px;
            }
            .rank {
              height: 32px;
              padding-left: 15px;
              line-height: 32px;
              background: url('../../assets/board/rank-l.png') no-repeat;
              background-size: contain;
              font-weight: 400;
              font-size: 20px;
              color: #ff934f;
            }

            .row-4 {
              font-size: 20px;
              color: #ff934f;
            }
          }
        }
      }
    }
    .rank.bottom-r {
      .rank {
        background-image: url('../../assets/board/rank-r.png') !important;
      }
      .row-4 {
        color: #507bff !important;
      }
      .rank-top {
        background-image: url('../../assets/board/r_title.png');
      }
    }
  }
}
.bottom-m {
  position: absolute;
  width: 555px;
  margin-top: 24px;
  .remainingDays {
    font-family: DroidSerif, DroidSerif;
    font-weight: 400;
    font-size: 30px;
    color: #2f57b6;
    line-height: 36px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-bottom: 13px;
  }
}
#countdownDisplay {
  display: flex;
  & > span {
    display: block;
    margin: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    i {
      display: block;
      width: 5px;
      height: 5px;
      background: #3d3d3d;
      &:first-child {
        margin-bottom: 6px;
      }
      &:last-child {
        margin-top: 6px;
      }
    }
  }
}
#countdownDisplay > div {
  display: inline-block;
  font-family: D-DIN-Bold, D-DIN-Bold;
  min-width: 108px;
  padding: 0 15px;
  height: 72px;
  line-height: 72px;
  background: url('../../assets/BusinessData/time-bg.png') no-repeat;
  background-size: cover;
  text-align: center;
  font-weight: 700;
  font-size: 60px;
  color: #121e36;
  letter-spacing: 2px;
  position: relative;

  span {
    font-family: DroidSerif, DroidSerif;
    font-weight: 400;
    font-size: 16px;
    color: #838d9f;
    line-height: 19px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -25px;
  }
}

::v-deep .seamless-warp {
  height: 328px;
  overflow: hidden;
}
</style>
